import React, { Component,PureComponent } from 'react';
import Child from './Child'

class Parent extends PureComponent {

  constructor() {
    super();
    this.state = {
      count: 1,
      showChild: true
    }
    console.log('parent constructor')
  }

  render() {
    console.log('parent render')
    return (
      <div id="app">
        {
          this.state.count
        }
        <hr />
        {
          this.state.showChild ? <Child count={this.state.count}></Child> : <h1>子组件未展示</h1>
        }
        <hr />
        <button onClick={this.handleClick}> 强制更新 </button>
        <button onClick={() => this.handleShow()}>显示/隐藏子组件</button>

        <button onClick={this.handleIncrement}> 更新 </button>
      </div>
    );
  }


  handleShow() {
    this.setState({
      showChild: !this.state.showChild
    })
  }

  handleClick = () => {
   
    this.state.count = 100;
    this.forceUpdate();
  }


  handleIncrement = () => {
    this.setState({
      count : this.state.count
    })
  }


  shouldComponentUpdate(){
    console.log('shouldComponentUpdate:',this.state.count)
    if(this.state.count === 5){
      //返回false render函数不执行
      return false;
    }
    //返回true render函数会执行
    return true;
  }

  componentDidMount() {
    // this.setState({
    //   count: 2
    // })
    // console.log('componentDidMount:', document.getElementById('app').innerHTML)
    // setTimeout(() => {
    //   this.setState({
    //     count: this.state.count + 5
    //   })
    // }, 3000)
  }

  //vue nextTick(()=>{})
  componentDidUpdate() {
    console.log('componentDidUpdate:', document.getElementById('app').innerHTML)
  }
}

export default Parent;